<!--
 * @Author: tian_biao
 * @Date: 2021-08-05 09:57:04
 * @LastEditTime: 2021-08-09 14:36:23
 * @Description: 消息列表
-->
<template>
    <article class="bg_4dbfae">
        <!-- 标题-->
        <div class="title-bg">
            <Theader :title="title"></Theader>
        </div>
        <div class="tabs">
            <van-tabs v-model="active" title-active-color="#0EB295" color="#0EB295" :line-width="lineWidth">
                <van-tab @click="tabClick('1')" :title="'通知'+'('+infrom+')'">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <div class="listBox">
                            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                                <van-cell v-for="item in infromList" :key="item.id" @click="toContent(item)">
                                    <div class="infromItemBox">
                                        <div class="infromTitle">关于开展东善桥变变电运维系统演示工作<div class="triangle"></div><span
                                                class="newMessage">新消息</span>
                                        </div>
                                        <div class="infromDate">2021/07/21 10:30</div>
                                    </div>
                                </van-cell>
                            </van-list>
                        </div>
                    </van-pull-refresh>
                </van-tab>

                <van-tab @click="tabClick('2')" :title="'我的消息'+'('+myMessage+')'">
                    <div class="listBox">
                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                            <van-cell v-for="item in infromList" :key="item.id" @click="toContent(item)">
                                <div class="infromItemBox">
                                    <div class="infromTitle">关于我的消息变变电运维系统演示工作<div class="triangle"></div><span
                                            class="newMessage">新消息</span>
                                    </div>
                                    <div class="infromDate">2021/08/05 10:30</div>
                                </div>
                            </van-cell>
                        </van-list>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <Tabbar></Tabbar>
    </article>
</template>

<script type="text/javascript">
    import Theader from "../component/header"
    import Tabbar from '@/components/tabbar'
    export default {
        name: 'message',
        components: {
            Theader,
            Tabbar
        },
        data() {
            return {
                title: "消息",
                active: 0,// 当前选中
                infrom: "6",//通知数量
                myMessage: "15",// 消息数量
                lineWidth: "2.8rem",// 下划线宽度
                infromList: [],// 通知list
                myMessageList: [],// 消息list
                // 通知 控制变量
                loading: false,
                finished: false,
                refreshing: false,
            }
        },

        computed: {

        },

        methods: {
            /**
             * @description:通知/消息切换
             * @param {*} type
             * @return {*}
             */
            tabClick(type) {
                if (type == "1") {
                    this.$set(this, "lineWidth", "2.8rem")
                } else {
                    this.$set(this, "lineWidth", "5.6rem")
                }
            },
            /**
             * @description: 通知加载跟多
             * @param {*}
             * @return {*}
             */
            onLoad() {
                setTimeout(() => {
                    if (this.refreshing) {
                        this.infromList = [];
                        this.refreshing = false;
                    }

                    for (let i = 0; i < 10; i++) {
                        this.infromList.push(this.infromList.length + 1);
                    }
                    this.loading = false;

                    if (this.infromList.length >= 40) {
                        this.finished = true;
                    }
                }, 1000);
            },
            /**
             * @description: 通知下拉刷新
             * @param {*}
             * @return {*}
             */
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            /**
             * @description: 跳转消息内容
             * @param {*} item
             * @return {*}
             */
            toContent(item) {
                this.$router.push({
                    name: "messageCon",
                    params: item
                });
            }
        },

        watch: {

        },
        mounted() {

        },
        created() {
            console.log(111);
        },

    }
</script>

<style scoped>
    article {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .bg_4dbfae {
        background: #fff !important;
    }

    .title-bg {
        margin-top: 5%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-self: center;
    }

    .tabs {
        margin-top: 5%;
    }

    .infromTitle {
        color: #333333;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 15px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        display: flex;
    }

    .infromDate {
        color: #999999;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 13px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        margin-top: 0.5rem;
    }

    .listBox {
        height: calc(100vh - 125px);
        background-color: #f5f6fa !important;
        overflow-y: auto;
    }

    .van-list {
        width: 95%;
        margin: 0 auto;
    }

    .van-cell {
        margin-top: 0.5rem;
        width: 100%;
        height: 5rem;
        padding: 1rem;
        border-radius: 4px;
        box-shadow: 0px 0px 1px 0px #000000;
    }

    .triangle {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid red;
        -webkit-transform: rotate(92deg);
        transform: rotate(-315deg);
        margin-left: 1rem;
    }

    .newMessage {
        width: 3rem;
        height: 1rem;
        display: inline-block;
        border-radius: 4px;
        background: #EB3B3B;
        color: #FFFFFF;
        font-family: Source Han Sans CN;
        font-weight: regular;
        font-size: 0.5rem;
        line-height: normal;
        letter-spacing: 0px;
        text-align: center;
        margin-left: -0.3rem;
    }
</style>